<template>
  <div class="flex_center">
    <div class="bodyContent">
      <div id="search">
        <div class="search search_choosed search_map_head flex flex_vertical_center flex_between" style="">
          <i style="color: #2d2d2d" class="fa fa-chevron-left for-map" v-on:click="toHistory"></i>
          <input type="text" id="search_address" class="search_address" v-model="addressLike" style="font-size: 0.8rem;color: #2d2d2d;border: none;height: 2rem!important;background: #f1f1f1" placeholder="请输入搜索地址(如：xx市xx)">
        </div>
        <div class="searchAddressList">
          <div class="content" id="choose_search" v-for="port in search_nearPost" v-on:click="chooseAddress(port)">
            <div class="address-choose-search white_bac">
              <div class="address">
                <p style="font-weight: bold">{{port.title}}</p>
                <p style="color: #9a9a9a">{{port.address}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import city3 from '../../assets/js/city.data-3'
    export default {
      data(){
        return{
          addressLike:'',
          search_nearPost:'',
          addressItem:'',
          region:'武汉市',
          shopCity:'',
        }
      },
      name: "search-address-list",
      mounted(){
        this.checkLogin();
        this.toType = this.$route.query.toType;
        this.id = this.$route.query.id;
        this.region = this.$route.query.searchCity;
        this.shopCity = this.$route.query.shopCity;
        this.addressItem = JSON.parse(this.getCache('addressItem'));//JSON.parse(localStorage.getItem('addressItem'));
        this.initH();
        this.$nextTick(function () {
          $('#search_address').focus()
        })
      },
      methods:{
        initH(){
          var allH = document.documentElement.clientHeight;
          var heardH = $('.search_map_head ').height();
          var h = allH - heardH;
          $('.searchAddressList').css('height',h+'px');
        },
        chooseAddress:function (obj) {
          var center = obj.location;
          if(obj.province != undefined && obj.province != null && obj.province!= ''){
            this.addressItem.area_info =obj.province;
          }
          if(obj.city != undefined && obj.city != null && obj.city != ''){
            this.addressItem.area_info += ' '+obj.city;
          }
          if(obj.district != undefined && obj.district != null && obj.district != ''){
            this.addressItem.area_info += ' '+obj.district;
          }
          this.addressItem.area_position = obj.location.lat +','+ obj.location.lng;
          this.addressItem.position_address = obj.title;
          //判断是否在配送范围
          this.checkRange(obj);

        },
        //判断是否在配送范围
        checkRange(obj){
          var latLng = new qq.maps.LatLng(obj.location.lat,obj.location.lng)
          this.addressItem.range_in = 1;
          this.yesS.getShopInfo(
            this.$comParams()
          ).then(res => {
            var choose_center = res.data.info.shop_position;
            var range_height = res.data.info.send_area_radius * 1000;
            //如果choose_center 不为空，判断是否在配送范围内
            if(choose_center != undefined && choose_center != '' && choose_center != null
              && range_height != undefined && range_height != null &&range_height != ''){
              if(choose_center.indexOf(',') != -1){
                choose_center = choose_center.split(',');
              }
              var shop_add = new qq.maps.LatLng(choose_center[0],choose_center[1]);

              var length = qq.maps.geometry.spherical.computeDistanceBetween(shop_add, latLng);
              if(length >range_height){
                this.$toast.warning('超出配送范围，请重新选择配送地址');
                this.addressItem.range_in = 0;
              }
            }
            //获取该地址的省市区编号
            this.getCodeOfAddress(obj.province,obj.city,obj.district);
          })
        },

        toHistory:function () {

          if(this.toType == 0){
            this.$router.push({path:'/qds/editAddress',query:{id:this.id,toType:this.toType}})
          }else if(this.toType == 1){
            this.$router.push({path:'/qds/addAddress'})
          }

        },
        getCodeOfAddress(provice,city,district){

          var _self = this;
          var cityData3 = city3.cityData3;

          if(cityData3 == undefined || cityData3 == null || cityData3 == '' || cityData3.length <=0){
            return;
          }
          for(var i=0;i<cityData3.length;i++){
            var data = cityData3[i];
            if(data.text == provice){
              this.addressItem.province_id  = data.value;

              var children = data.children;
              if(children != undefined && children != null && children != '' && children.length > 0){
                for(var j = 0;j<children.length;j++){
                  if(children[j].text == city){
                    this.addressItem.city_id = children[j].value
                    children = children[j].children;
                    if(children != undefined && children != null && children != '' && children.length > 0){
                      for(var m =0;m<children.length;m++){
                        if(children[m].text == district){
                          this.addressItem.area_id = children[m].value
                          break;
                        }
                      }
                    }
                    break;
                  }
                }
              }
              break;
            }
          }
          this.setCache('addressItem', JSON.stringify(this.addressItem));
          // localStorage.setItem('addressItem', JSON.stringify(this.addressItem));
          this.$router.push({path:'/qds/addAddress',query:{id:this.id,toType:this.toType}})
        }
      },
      watch:{
        addressLike:{
          handler:function(val,oldval){
            var self = this;
            if(self.isEmpty(self.region)){
              self.region = self.shopCity;
            }
            var url = 'https://apis.map.qq.com/ws/place/v1/suggestion/?region='+this.region+'&keyword='+val+'&output=jsonp&key=RHHBZ-K26W6-CPISS-ENGXG-HVCRS-QJFQT';
            url = encodeURI(url);
            $.ajax({
              type:"get",
              url: url,
              dataType: "JSONP",
              jsonp: 'callback',
              success: function (res) {
                self.search_nearPost = res.data;
              },
              error: function (res,reson) {
                mui.toast('请求失败');
              }
            });
          },
          deep:true
        }
      }
    }
</script>

<style scoped>
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
  @import "./css/searchAddressList.css";
#choose_search{
  padding: 0.3rem 1rem;
}
</style>
